<template>
	<view class="content">
<canvas class="facecat" id="myCanvas" canvas-id="myCanvas" style="width:100%;height:2000rpx;" @touchstart="touchStartCanvas" @touchmove="touchMoveCanvas" @touchend="touchEndCanvas"/>
	</view>
</template>
<script>
	import facecat from './facecat.js';
	import facecat_uni from './facecat_uni.js';
	let gPaint = new facecat.FCPaint();
	
	export default { 
		data() {
			return {
				widthEle : 0, 
				heightEle: 0
			}
		},
		onLoad() {
		}, 
		mounted(){
				const canvas = document.querySelector('#myCanvas');
				gPaint.isMobile = facecat.isMobileMode();
				//注册事件
				facecat.addDefaultEvent(canvas, gPaint);
				uni.getSystemInfo({
				  success: (res) => {
					this.widthEle = res.windowWidth;
					this.heightEle = res.windowHeight;
				  }
				});
				this.windowResizeCallback = (res) => {
				 	try {
				 		this.widthEle = res.size.windowWidth;
				 		this.heightEle = res.size.windowHeight;
				 		const canvas = document.querySelector('#myCanvas');
				 		canvas.width = this.widthEle;
				 		canvas.height = this.heightEle;
				 		facecat.updateViewDefault(gPaint.views);
				 	} catch (err) {
				 	}
				 	facecat.invalidate(gPaint);
				};
				canvas.width = this.widthEle;
				canvas.height = this.heightEle;
				gPaint.canvas = canvas;
				gPaint.container = this;
				//解析加载XML
				let xml = `<?xml version="1.0" encoding="utf-8"?>
				<html xmlns="facecat">
				  <head>
				  </head>
				  <body>
					<div dock="fill" type="tab" selectedindex="0">
					  <div name="TabPage" text="可视化生成" type="tabpage">
						<input type="text" name="TextBox" location="29,40" size="100,20" />
						<input type="text" name="TextBox2" location="27,78" size="100,20" backcolor="rgb(233,87,62)" textcolor="rgb(255,255,255)" passwordchar="*" />
						<input type="button" name="Button" text="Button" location="27,120" size="100,20" value="点击" backcolor="rgb(246,187,67)" textcolor="rgb(0,0,0)" />
					  </div>
					  <div name="TabPage2" text="代码创建" type="tabpage" />
					</div>
				  </body>
				</html>
				`;
				facecat.renderFaceCat(gPaint, xml);
		},
		methods: {  
		}
	}
</script>

<style>
</style>
